<template>
  <div class="swiper">
    <ElCarousel :interval="3000" type="card" height="280px">
      <el-carousel-item v-for="(item, index) in swiperList" :key="index">
        <img :src="item.picImg" />
      </el-carousel-item>
    </ElCarousel>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';

  const list = [];
  for (let i = 1; i < 9; i += 1) {
    list.push({
      picImg: new URL(`../assets/img/swiper/${i}.jpg`, import.meta.url).href,
    });
  }
  const swiperList = reactive(list);
</script>

<style type="less">
  .swiper {
    width: 90%;
    margin: auto;
    margin-top: 40px;

    img {
      width: 100%;
    }
  }
</style>
